<template>
  <div class="menu">
    <ul>
      <li v-for="item in menus" :key="item.name">
        <img
          :src="item.img_url"
          :width="format_size(item.img_size, 'w')"
          :height="format_size(item.img_size, 'h')"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    menus: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    format_size(val, type) {
      let arr = val.split("X");
      // console.log(arr);
      if (type == "w") {
        return arr[0];
      } else {
        return arr[1];
      }
    },
  },
};
</script>

<style lang="scss">
.menu {
  ul {
    display: flex;
  }
}
</style>